{% extends 'base.html' %}


{% block operation %}
    <div id="operating" style="display: none">
        <p>test</p>
    </div>
    <fieldset>
        <legend>测试按钮</legend>
        <input id="testButton" type="button" name="testButton" value="测试DIV" onclick="popOperatePanel()">
    </fieldset>
    <script>
        function popOperatePanel() {
            let op = document.getElementById("operating");
            if (op.style.display === "none") {
                op.style.display = "block";
            } else {
                op.style.display = "none";
            }
        }
    </script>
    <fieldset>
        <legend>添加(在数据库中添加一条信息)</legend>
        <form id="sp-parameter" method="post">
            <label for="summary">摘要:</label>
            <input id="summary" type="text" name="summary" value="" onfocus="this.select()" autocomplete="off" required
                   style="width:350px">
            <label for="accounting_title">会计科目:</label>
            <select id="accounting_title" name="accounting_title" accesskey="1" required>
                {% for accounting_title in accounting_tiles %}
                    <option value="{{ accounting_title.accounting_title }}">{{ accounting_title.accounting_title }}</option>
                {% endfor %}
            </select>
            <label for="payment_mode" title="ALT+1可以快速选择">报销方式:</label>
            <select id="payment_mode" name="payment_mode" required>
                {% for paymentMode in payment_modes %}
                    <option value="{{ paymentMode.payment_mode }}">{{ paymentMode.payment_mode }}</option>
                {% endfor %}
            </select>
            <label for="paper_count">张数:</label>
            <input id="paper_count" type="number" name="paper_count" value="0" onfocus="this.select()"
                   autocomplete="off" required style="width:50px">
            <label for="amount">报销金额:</label>
            <input id="amount" type="number" name="amount" value="0.0" onfocus="this.select()" autocomplete="off"
                   required style="width:80px">
            <input class="btn" type="button" name="submit" value="添加" onclick="submitData_spAdd('#sp-parameter')">
        </form>
    </fieldset>
    <br>
    <fieldset>
        <legend>更新(先选择一行，再点击行末的“编辑”按钮)</legend>
        <form id="sp-parameter_update" method="post">
            <label for="summary_update">摘要:</label>
            <input id="summary_update" type="text" name="summary_update" autocomplete="off" required
                   style="width:350px">
            <label for="accounting_title_update">会计科目:</label>
            <select id="accounting_title_update" name="accounting_title_update" accesskey="1" required>
                {% for accounting_title in accounting_tiles %}
                    <option value="{{ accounting_title.accounting_title }}">{{ accounting_title.accounting_title }}</option>
                {% endfor %}
            </select>
            <label for="payment_mode_update" title="ALT+1可以快速选择">报销方式:</label>
            <select id="payment_mode_update" name="payment_mode_update" required>
                {% for paymentMode in payment_modes %}
                    <option value="{{ paymentMode.payment_mode }}">{{ paymentMode.payment_mode }}</option>
                {% endfor %}
            </select>
            <label for="paper_count_update">张数:</label>
            <input id="paper_count_update" type="number" name="paper_count_update" onfocus="this.select()"
                   autocomplete="off" required style="width:50px">
            <label for="amount_update">报销金额:</label>
            <input id="amount_update" type="number" name="amount_update" onfocus="this.select()" autocomplete="off"
                   required style="width:80px">
            <input type="hidden" id="sp_id" name="sp_id" value=""/>
            <input class="btn" type="button" id="submit_update" name="submit_update" value="更新"
                   onclick="submitData_spUpdate('#sp-parameter_update')">
        </form>
    </fieldset>
    <br>
    <fieldset>
        <legend>查询(所有条件均为“与”操作，为空为零或者忽略时将略过该条件)</legend>
        <form id="sp-parameter_query" method="post">
            <label for="summary_query">摘要:</label>
            <input id="summary" type="text" name="summary" value="" onfocus="this.select()" autocomplete="off" required
                   style="width:350px">
            <label for="accounting_title_query">会计科目:</label>
            <select id="accounting_title_query" name="accounting_title_query" accesskey="1" required>
                <option value="忽略" selected>忽略</option>
                {% for accounting_title in accounting_tiles %}
                    <option value="{{ accounting_title.accounting_title }}">{{ accounting_title.accounting_title }}</option>
                {% endfor %}
            </select>
            <label for="payment_mode_query" title="ALT+1可以快速选择">报销方式:</label>
            <select id="payment_mode_query" name="payment_mode_query" required>
                <option value="忽略" selected>忽略</option>
                {% for paymentMode in payment_modes %}
                    <option value="{{ paymentMode.payment_mode }}">{{ paymentMode.payment_mode }}</option>
                {% endfor %}
            </select>
            <label for="paper_count_query">张数:</label>
            <input id="paper_count_query" type="number" name="paper_count_query" value="0" onfocus="this.select()"
                   autocomplete="off" required style="width:50px">
            <label for="amount_query">报销金额:</label>
            <input id="amount_query" type="number" name="amount_query" value="0.0" onfocus="this.select()" autocomplete="off"
                   required style="width:80px">
            <input class="btn" type="button" name="submit" value="查询" onclick="submitData_spQuery('#sp-parameter')">
        </form>
    </fieldset>
    <br>
{% endblock %}

{% block spq %}
{% endblock %}

{% block sp %}
    <table id="table-sticky-paper" class="table-sticky-paper">
        <thead>
        <tr>
            <th>内部ID</th>
            <th>摘要</th>
            <th>会计科目</th>
            <th>支付方式</th>
            <th>单据张数</th>
            <th>合计报销金额</th>
            <th>单据状态</th>
            <th>录入时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for spsx in sps %} {# 迭代变量，生成初始表格 #}
            <tr id="recorder-sp-{{ spsx.id }}"
                onclick="clickRowColor(this)"
                onmouseenter="mouseenterColor(this)"
                onmouseleave="mouseleaveColor(this)"

            >
                <td class="id">{{ spsx.id }}</td>
                <td>{{ spsx.summary }}</td>
                <td>{{ spsx.accounting_title.accounting_title }}</td>
                <td>{{ spsx.payment_mode.payment_mode }}</td>
                <td class="number">{{ spsx.paper_count }}</td>
                <td class="number">{{ spsx.amount }}</td>
                <td class="text-right">{{ spsx.doc_status.doc_status }}</td>
                <td class="datetime">{{ spsx.edit_time.strftime("%Y-%m-%d %H:%M:%S") }}</td>
                <td>
                    <form class="inline-form" method="post" action="{{ url_for('delete', sticky_paper_id=spsx.id) }}">
                        <input class="btn" type="submit" name="delete" value="删除"
                               onclick="return confirm('确定要删除本条记录吗?')">
                    </form>

                    <form class="inline-form" method="post">
                        <input class="btn" type="button" name="edit" value="编辑" onclick="trToForm_spEdit('{{ spsx.id }}','recorder-sp-{{ spsx.id }}', 'sp-parameter_update')">
                    </form>
                </td>
            </tr>
        {% endfor %}
        </tbody>
        <tfoot>

        </tfoot>
    </table>
{% endblock %}

{% block detailTable1 %}
    <div class="wrapper-detail">
        <table class="table-md">
            <thead>
            <tr>
                <th>单据类型</th>
                <th>票据号码</th>
                <th>开票日期</th>
                <th>销售方或参与人</th>
                <th>票面金额</th>
                <th>实报金额</th>
                <th>是否刷卡</th>
                <th>领款人</th>
                <th>刷卡日期</th>
                <th>购方单位</th>
            </tr>
            </thead>
            <tbody>
            {% for spsx in sps %} {# 迭代movies变量 #}
                <tr id="recorder-md-{{ sps.id }}" onclick="clickRowColor(this)" onmouseenter="mouseenterColor(this)"
                    onmouseleave="mouseleaveColor(this)">
                    <td>{{ spsx.summary }}</td>
                    <td>{{ spsx.paper_count }}</td>
                    <td>

                    </td>
                </tr>
            {% endfor %}
            </tbody>
            <tfoot>

            </tfoot>
        </table>
    </div>
{% endblock %}